window.onload = function() {
    var token = localStorage.getItem('mytoken')

    console.log(adname);
    var li = document.querySelectorAll('.li'),
        imgList = document.getElementsByClassName('img');

    const ol = document.querySelectorAll('.lio');
    const userDetail = document.getElementById('table');
    // console.log(userDetail);
    // userDetail.addEventListener('click', function(e) {
    //     e.target.onclick = function() {
    //         console.log(e.target);
    //         if(e.target.)

    //     }
    // })
    var adname = localStorage.getItem('name');
    const youname = document.querySelector('.yourname')
    youname.innerHTML = adname
        //admin下拉
    const span_a = document.querySelector('.section');
    const img1 = document.querySelector('.rej')
    span_a.addEventListener('mousemove', function() {
        // console.log(img1);
        img1.src = './imges/up.png'
    })
    span_a.addEventListener('mouseleave', function() {
        img1.src = './imges/down.png'
    })

    //跳转效果
    for (let i = 0; i < ol.length; i++) {
        ol[i].onclick = function() {

            // console.log(li.length);
            // console.log(i);
            if (i === 0) {
                window.location.href = '后台用户列表.html'
            } else if (i === 1) {
                // window.location.href = '后台漫画详情列表.html'
            } else if (i === 2) {
                window.location.href = '后台留言.html'
            } else if (i === 3) {
                window.location.href = '管理员.html'
            }
        }
    }



    const lo = document.querySelector('#yp');
    console.log(lo);
    lo.addEventListener('click', function(e) {
        console.log(1);
        if (e.target.id === 'pers') {
            console.log(e.target);

            window.location.href = 'personMan.html'
        } else if (e.target.id === 'zh') {
            console.log(e.target);
            window.location.href = '后台漫画详情列表.html'
            e.target.className = 'color'

        }
        console.log(e.target);
    })


    //点击侧边栏样式改变
    for (var i = 0; i < li.length; i++) {
        li[i].addEventListener('click', function() {
            for (var i = 0; i < li.length; i++) {
                li[i].className = ''
            }
            this.className = 'color'
        })
    }


    //侧边栏下拉列表效果
    // console.log(imgList)
    var sum = 0;
    for (let i = 0; i < li.length; i++) {
        li[i].onclick = function() {
            // this.className = 'color'
            sum++;
            var h = i;
            if (sum % 2 !== 0) {
                ol[h].style.overflow = 'visible';
                ol[h].style.height = 52 + "px";
                imgList[h].style.transform = "rotateZ(90deg)";
                imgList[h].style.transition = 'all 0.2s';
            } else {
                ol[h].style.overflow = 'hidden';
                ol[h].style.height = 0;
                imgList[h].style.transform = 'rotateZ(0)'
                imgList[h].style.transition = 'all 0.2s'
            }

            ol[h].addEventListener('click', function(e) {
                    // console.log(1111);
                    sum = 0; //让sum一直为偶数 二级菜单不隐藏
                })
                // console.log(sum);
        }



    }

    function getLocalTime(nS) {
        return new Date(parseInt(nS)).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
    }

    //用户详情按钮
    function adetail(id) {
        $.ajax({
            url: `http://192.168.3.184:7001/users/${id}`,
            type: "GET",
            headers: {
                token: token
            },
            success: (res) => {
                console.log(res);
                if (res.code === 0) {
                    // console.log(res.data);
                    for (const item in res.data) {
                        let time = getLocalTime(res.data.reg_time)
                        console.log(item);
                        const name_d = document.querySelector('.name');
                        name_d.innerHTML = ` 
                        <span class="hi"><img   src='http://192.168.3.184:7001/${res.data.head_portrait}'></span>
                        <span class="last">用户名：${res.data.user_name}</span>
                       
                        <span class="t">手机号:${res.data.phone}</span>
                        <span class="f">邮箱:${res.data.email}</span>
                      
                        <span class="ff">地址:${res.data.address}</span>
                        <span class="ff">年龄:${res.data.age}</span>
                        <span class="ff">用户id:${res.data.id}</span>
                        <span class="ff">性别:${res.data.sex}</span>
                        <span class="ff">注册时间:${time}</span>`
                    }
                }


            }
        })
    }
    //点击耳机列表
    // const oli = document.querySelectorAll('.oli');
    // for (let i = 0; i < oli.length; i++) {
    //     oli[i].addEventListener('click', function() {
    //         for (let i = 0; i < oli.length; i++) {
    //             li[i].className = ''
    //         }
    //         this.className = 'color'
    //     })

    // }

    //点击汉堡图标侧边栏移动
    const hanbao = document.querySelector('.hanbao');
    const letf_nav = document.querySelector('.left-nav');
    var count = 0;
    const container = document.querySelector('.container')
    hanbao.onclick = function() {
        count++;
        if (count % 2 !== 0) {
            letf_nav.style.left = -220 + "px";
            container.style.width = 100 + '%'
            container.style.left = 0 + 'px';
            container.style.transition = 'all 0.2s'
        } else {
            letf_nav.style.left = 0 + "px";
            container.style.left = 220 + 'px'
                // container.style.left = 0 + 'px';
            container.style.transition = 'all 0.2s'
            container.style.width = 88.4 + '%'

        }

    }

    //点击修改弹出模态框
    const model = document.querySelector('.model')
    const up = document.querySelector('.userDetail');
    const news = document.getElementsByName('g');
    var isUp = 0;
    up.addEventListener('click', function(e) {
        console.log(e.target);
        //判断修改按钮
        if (e.target.name === 'g') {


            model.style.visibility = 'visible'
            const ida = e.target.dataset.id
            console.log(ida)
            isUp = ida;
            getTail(isUp)

        }
        //判断删除按钮
        if (e.target.name === 'delete') {
            const flag = confirm('是否删除?')
            console.log()
            if (flag == true) {
                console.log(e.target.id);
                rem(e.target.id);
                console.log(e.target.id);
                console.log(e.target.id);



                console.log('你点了确认');
            } else(
                console.log('你点了取消')
            )
        }

        //判断用户详情
        if (e.target.name === 'gt') {
            var detailid = e.target.dataset.id
                // module.export = { detailid }
                // export const ii = detailid

            // window.location.href = 'userDetail.html'
            adetail(detailid)
            const aaaa = document.querySelector('.aaaa');
            aaaa.style.opacity = 1;
            aaaa.style.zIndex = 1002;
        }

    })

    //模态框的关闭按钮
    const guanbi = document.querySelector('.guanbi');
    guanbi.onclick = function() {
        model.style.visibility = 'hidden'
    }

    //添加按钮弹出模态框
    const look = document.querySelector('.look');
    // look.addEventListener('click', function() {
    //     model.style.visibility = 'visible'
    //     usn.value = '';
    //     ps.value = '';
    //     phone.value = '';
    //     email.value = '';
    //     head.value = ''
    //     isUp = 0;
    // })

    //提交
    const tijiao = document.querySelector('.tijiao');
    const usn = document.querySelector('#usn');
    const ps = document.querySelector('#ps');
    const da = document.querySelector('#da')
    const phone = document.getElementById('phone');
    const email = document.getElementById('email');
    const head = document.getElementById('head');
    const newps = document.getElementById('newps')
    tijiao.addEventListener('click', function() {
        let usn_val = usn.value;
        let ps_val = ps.value;
        // let da_val = da.value;
        let phone_val = phone.value;
        let email_val = email.value
        let head_val = head.value;
        let newps_val = newps.value
        console.log(usn_val, ps_val, phone_val, email_val, head_val, newps_val);
        if (isUp) {

            // console.log(1);
            update(isUp, usn_val, ps_val, phone_val, email_val, head_val, newps_val)
        } else {
            //用户名正则，4到16位（字母，数字，下划线，减号）
            const uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
            //匹配密码
            //长度6-18，字符串：数字英文特殊符号且必须包含数字及英文
            const upswp = /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z~!@#$%^&*]{6,18}$/;
            //Email正则
            const ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            //手机号正则
            const mPattern = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
            if (!uPattern.test(usn_val)) {
                // console.log(usn_val);
                usn.value = '';
                usn.value = '4-16位数字字母下划线'
                usn.className = 'coo'
                    // console.log(155);
                usn.addEventListener('click', () => {
                    usn.className = ''
                    usn.value = ''
                })

            } else if (!upswp.test(ps_val)) {
                ps.value = '';
                ps.value = '6-18位，必须包含英文和数字'
                ps.className = 'coo'
                    // console.log(155);
                ps.addEventListener('click', () => {
                    ps.className = ''
                    ps.value = ''
                })
            } else if (!mPattern.test(phone_val)) {
                phone.value = '';
                phone.value = '手机号不合法'
                phone.className = 'coo'
                    // console.log(155);
                phone.addEventListener('click', () => {
                    phone.className = ''
                    phone.value = ''
                })
            } else if (!ePattern.test(email_val)) {
                email.value = '';
                email.value = '邮箱不合法'
                email.className = 'coo'
                    // console.log(155);
                email.addEventListener('click', () => {
                    email.className = ''
                    email.value = ''
                })
            } else {
                add(usn_val, ps_val, phone_val, email_val);
                model.style.visibility = 'hidden';

            }


        }



    })



    //搜索框

    //创建表头

    function create() {
        var trall = document.createElement('tr');
        trall.innerHTML = `<th>
ID
</th>
<th>
用户名
</th>

<th>
手机号
</th>
<th>
邮箱
</th>
<th>
头像地址
</th>
<th>
注册时间
</th>
<th>
操作
</th>`;
        userDetail.appendChild(trall)
    }



    //退出
    const logout = document.querySelector('.logout');
    logout.onclick = function() {
        window.location.href = 'login.html'
    }


    function getList(keyname) {
        $.ajax({
            url: `http://192.168.3.184:7001/users`,
            type: "get",
            headers: {
                token
            },
            data: {
                user_name: keyname,
                // phone: keyname,
                // email: keyname

            },
            success: (res) => {
                console.log(res.data);
                const _content = document.querySelector('#table')
                const showContent = () => {
                    //每次清空

                    _content.innerHTML = '';
                    _content.innerHTML = `<th>ID</th>
                    <th>用户名</th>
                
                    <th>邮箱</th>
                    <th>手机号</th>
                   
                    <th>头像</th>
                    <th>注册时间</th>
                    <th>操作</th>`
                    res.data.forEach((item, index) => {
                        //遍历计算方法，当前为第1页，一页2个，以此类推
                        // console.log(item, index);

                        const time = getLocalTime(item.reg_time);
                        const tr = document.createElement('tr');
                        tr.innerHTML = `<td>${item.id}</td>
                            <td>${item.user_name}</td>
                         
                            <td>${item.email}</td>
                            <td>${item.phone}</td>
                            <td><img class='hear' src='http://192.168.3.184:7001/${item.head_portrait}' /></td>
                            <td>${time}</td>
                            <td>
                            <img src='.\\imges\\edi.png' class="btn up" name="g" data-id='${item.id}' />
                            <img src='.\\imges\\de.png' class="btn" name="delete" id='${item.id}' />
                            
                            <img src='.\\imges\\ussss.png' class="btn " name="gt" data-id='${item.id}' />
                            </td>`
                        _content.appendChild(tr)

                    })
                }
                showContent()
                    // if (res.code === 0) {


                //     const biaoge = document.getElementById('table');
                //     console.log(biaoge);
                //     biaoge.innerHTML = ''
                //     create();
                //     for (var i = 0; i < res.data.length; i++) {
                //         // console.log(res.data[i].id);


                //         // console.log(userDetail);

                //         const tr = document.createElement('tr');

                //         for (let data in res.data[i]) {

                //             // console.log(data.user_name);


                //             const td = document.createElement("td");
                //             td.innerHTML = res.data[i][data]
                //             tr.appendChild(td)

                //             // if (data == 'operate') {
                //             //     td.innerHTML = `<button class="btn" name="delete">删除</button>
                //             //    <button class="btn up" name="g">修改</button>`
                //             // }

                //         }
                //         const lasttd = document.createElement('td');
                //         lasttd.innerHTML = `<img src='.\\imges\\de.png' class="btn" name="delete" id='${res.data[i].id}' />
                //     <img src='.\\imges\\edi.png' class="btn up" name="g" data-id='${res.data[i].id}' />`
                //         tr.appendChild(lasttd)
                //         tr.id = res.data[i].id;
                //         userDetail.appendChild(tr);
                //     }
                // }

                // kan();

            }
        })
    }


    //搜索
    const ser = document.querySelector('.search-txt');

    const sbtn = document.querySelector('.search-btn')

    sbtn.onclick = function() {
        let serd = ser.value;
        getList(serd);
    }

    //点击用户详情返回
    const met = document.querySelector('.aaaa')
    const returna = document.querySelector('.return');
    returna.addEventListener('click', function() {
        console.log(1);
        met.style.opacity = 0;
        met.style.zIndex = -1;
    })


    const admin = document.querySelector('.admin');
    const liLis = admin.getElementsByTagName('li');
    console.log(liLis);

    const sec = document.querySelector('.section');
    sec.addEventListener('mousemove', function() {
        admin.style.top = 50 + 'px';
        admin.style.opacity = 1;
        // admin.style.zIndex = -1

    })
    let timer;
    sec.addEventListener('mouseleave', function() {

        timer = setTimeout(function() {
            admin.style.top = 800 + 'px';
            admin.style.opacity = 0;
        }, 200)

    })
    admin.addEventListener('mousemove', function() {
        clearTimeout(timer)
        admin.style.top = 50 + 'px';
        admin.style.opacity = 1;
        admin.style.zIndex = 1001

    })

    admin.addEventListener('mouseleave', function() {
        let timer;
        timer = setTimeout(function() {
            admin.style.top = 800 + 'px';
            admin.style.opacity = 0;
        })


    })


    //获取admin下的li列表
    //获取admin下的li列表
    liLis[0].onclick = function() {
        location.href = 'imgManeger.html'
    }
    liLis[1].onclick = function() {
        location.href = 'zhoubian.html'
    }
    liLis[2].onclick = function() {
        console.log(1);
        location.href = 'tuijian.html'
    }

    const shouye = document.getElementById('shouye');
    shouye.addEventListener('click', function() {
        window.location.href = 'http://192.168.3.189:5501/layout/home_page.html'
    })
}